import React, { Component } from 'react';
import {
    View,
    Text,
    Image,
    FlatList,
    TouchableOpacity,
    Dimensions,
} from 'react-native';


class HomeCell extends Component {
    state = {}
    render() {
        item = this.props.item

        return (
            <TouchableOpacity
                onPress={() => this.props.onPress()}
                style={style.content}
            >
                <View style={style.content}>
                    <Text style={style.title}>
                        {item.title}
                    </Text>

                    <Image source={{
                        uri: item.images[0],
                        cache: 'force-cache'
                    }}
                        style={style.img} />
                </View>

                <SeparatorComponent />
            </TouchableOpacity>
        );
    }
}

class SeparatorComponent extends Component {
    state = {}
    render() {
        return (
            <View style={{
                position: 'absolute',
                bottom: 0,
                backgroundColor: 'rgba(184,184,184,0.3)',
                height: 1,
                width: '100%',
                left: '2%',
            }} />
        );
    }
}

export { HomeCell };


var style = {
    content: {
        flex: 1,
        flexDirection: 'row',
        height: 80,
        width: '96%',
        left: '2%',
        paddingTop: 5,
        paddingBottom: 10,
    },

    img: {
        flex: 2,
        margin: 3,
    },

    title: {
        flex: 6,
        lineHeight: 20,
        fontWeight: 'bold',
    },
}